<!--奢侈品订单-->
<template>

	<div id="luxuryOrderSearchList" class="container-fluid">

		
	<div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">查询条件</h3>
      </div>
      <div class="panel-body" @keyup.13="onSubmit">
				 <el-form class="demo-form-inline" inline="true" >

				  <el-form-item label="订单编号">
				    <el-input  placeholder="订单号码" v-model="form.orderId" ></el-input>
				  </el-form-item>
          
          <el-form-item label="店铺名称">
            <el-input  placeholder="店铺名称" v-model="form.storeName" ></el-input>
          </el-form-item>

          <el-form-item label="下单时间">
              <el-date-picker
                v-model="time"
                type="daterange"
                align="right"
                placeholder="选择日期范围"
                :picker-options="pickerOptions2">
              </el-date-picker> 
          </el-form-item>

          <el-form-item label="订单状态">
              <el-select v-model="form.orderStatus"  placeholder="请选择">
                <el-option label="全部" value="" >全部</el-option>
                <el-option label="待确认"    value="wait_confirm" >待确认</el-option>
                <el-option label="待支付"  value="wait_pay">待支付</el-option>
                <el-option label="已支付"  value="already_pay">已支付</el-option>
                <el-option label="未发货"  value="not_in_use">未使用</el-option>
                <el-option label="已签收"  value="used">已签收</el-option>
                <el-option label="已完成"  value="finish">已完成</el-option>
                <el-option label="申请退款"  value="already_apply_refund">申请退款</el-option>
                <el-option label="退款完成"  value="already_refund">退款完成</el-option>
                <el-option label="交易关闭"  value="close">交易关闭</el-option>
              </el-select>
          </el-form-item>
          
          <el-form-item>
				    <el-button type="primary" @click="onSubmit">查询</el-button>
				  </el-form-item>
				</el-form>
        <div class="panel-body">

          <el-tag v-if="!!form.storeId" :key="form.storeIdName" :closable="true" type="gray"  @close="handleClose(tag)">
            {{form.storeIdName}}
          </el-tag>

        </div>

      </div>
    </div>

     <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">排序</h3>
      </div>
      <div class="panel-body">
       	
      </div>
    </div>


    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">查询结果</h3>



      </div>
      <div class="panel-body">
     			

     		<table class="table table-striped table table-bordered table-condensed">
				
			 	<thead>
			 		<tr>
			 			<th>订单主键</th>
			 			<th>订单号</th>
			 			<th>店铺名称</th>
			 			<th>订单金额</th>
			 			<th>实际支付金额</th>
            <th>金币支付金额</th>
			 			<th>支付类型</th>
            <th>支付状态</th>
			 			<th>下单时间</th>
			 			<th>支付时间</th>
            <th>赠送金币</th>
            <th>客户手机号</th>
            <th>数量</th>
			 			<th>订单状态</th>
            <th>操作</th>
			 		</tr>
			 	</thead>

			 	<tbody>
			 	  
          <tr v-for=" order in orderList ">
              <td>
                  {{ order.id }}  
              </td>
              <td>
                  {{order.orderId}}
              </td>
               <td @click="selectStoreId(order.storyId,order.storeName)">
                <el-tag type="primary" >  
                  {{order.storeName}}
                </el-tag>
              </td>
              <td>
                  {{order.totalAmount}}
              </td>
              <td>
                  {{order.payAmount}}
              </td>
              <td>
                  {{order.coinPay}}
              </td>
              <td>
                  {{order.payType | payType}}
              </td>
              <td>
                  {{order.payStatus }}
              </td>
              <td>
                  {{order.inputOn}}
              </td>
               <td>
                  {{order.payDate}}
              </td>
               <td>
                  {{order.toCoin}}
              </td>
               <td>
                  {{order.customerPhone}}
              </td>
              <td>
                  {{order.quantity}}
              </td>
              <td>
                <el-tag type="grey" >  
                   {{ order.orderStatus | shepinorderStatus }}
                </el-tag>
              </td>
              <td>
                  <el-button type="info" size="mini">查看详情</el-button>
              </td>
          </tr>   


			 	</tbody>

			</table>

       <div class="block">
       
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.form.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalSize">
        </el-pagination>
      </div>
      </div>
    </div>

	</div>

		
</template>

<script>
  import axios from 'axios'

  export default{
  	data () {
  		return {
          orderList: [],
          form:{
            orderId:'',
            pageNum: 1,
            pageSize: 10,
            storeId:'',
            storeIdName:'',
            storeName:'',
            startTime:'',
            endTime:'',
            orderStatus:''
          },
          page:{
            totalSize: 0,
            totalPage: ''
          },
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        time:''
  		}
  	},
    mounted (){
      this.getorderList();
    },
  	methods: {
  		getorderList (){
        let param=this.form;
        if(!!!param.storeId)
            delete param.storeId;
        if(!!!this.time){
          delete param.startTime;
          delete param.endTime;
        }else{
          param.startTime=this.time[0].Format("yyyy-MM-dd");
          param.endTime=this.time[1].Format("yyyy-MM-dd");
        }
  			axios.post("/api/order/getLuxuryGoodsOrderList",param).then((res) => {
  				  this.orderList=res.data.data.orderList;
            this.page.totalSize=res.data.data.totalSize;
            this.page.totalPage=res.data.data.totalPage;
  			});
  		},
      //查询按钮
      onSubmit (){
        this.getorderList();
      },
      //分页
      handleCurrentChange(pageNum){
        this.form.pageNum=pageNum;
        this.getorderList();
      },
      //页码
      handleSizeChange(pageSize){
        this.form.pageSize=pageSize;
        this.getorderList();
      },
      selectStoreId(storeId,storeName){    
        this.form.storeId=storeId;
        this.form.storeIdName=storeName;
        this.getorderList();
      },
      handleClose(){
        this.form.storeId='';
        this.form.storeIdName='';
        this.getorderList();
      }
  	}
  }
	
</script>

<style lang="less" scoped>
<style>

